<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - async for All</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../js/ztree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="../js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="../js/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../js/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery.autocomplete.min.js"></script>
    <script type="text/javascript" src="../js/ztree/js/jquery.ztree.excheck.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.5.3/themes/icon.css">
    <script type="text/javascript" src="../js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/leftTree.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery.autocomplete.min.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        var demoMsg = {
            async:"正在进行异步加载，请等一会儿再点击...",
            expandAllOver: "全部展开完毕",
            asyncAllOver: "后台异步加载完毕",
            asyncAll: "已经异步加载完毕，不再重新加载",
            expandAll: "已经异步加载完毕，使用 expandAll 方法"
        }
        var setting = {
            async: {
                enable: true,
                url:"../../../api/tree/v1/getESNodes",
                autoParam:["id", "name=n", "level=lv"],
                dataFilter: filter,
                type: "get"
            },
            data: {
                simpleData: {//是否为简单数据类型JSON
                    enable:true,
                    idKey: "id",//使用简单必须标明的的节点对应字段
                    pIdKey: "pId",//使用简单必须标明的的父节点对应字段
                    rootPId:null//根
                }
            },
            check: {
                enable: true
            }
        };

        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i=0, l=childNodes.length; i<l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }

        function beforeAsync() {
            curAsyncCount++;
        }

        function onAsyncSuccess(event, treeId, treeNode, msg) {
            curAsyncCount--;
            if (curStatus == "expand") {
                expandNodes(treeNode.children);
            } else if (curStatus == "async") {
                asyncNodes(treeNode.children);
            }

            if (curAsyncCount <= 0) {
                if (curStatus != "init" && curStatus != "") {
                    $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
                    asyncForAll = true;
                }
                curStatus = "";
            }
        }

        function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
            curAsyncCount--;

            if (curAsyncCount <= 0) {
                curStatus = "";
                if (treeNode!=null) asyncForAll = true;
            }
        }

        var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
            goAsync = false;
        function expandAll() {
            if (!check()) {
                return;
            }
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            if (asyncForAll) {
                $("#demoMsg").text(demoMsg.expandAll);
                zTree.expandAll(true);
            } else {
                expandNodes(zTree.getNodes());
                if (!goAsync) {
                    $("#demoMsg").text(demoMsg.expandAll);
                    curStatus = "";
                }
            }
        }

        function asyncAll() {
            if (!check()) {
                return;
            }
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            if (asyncForAll) {
                $("#demoMsg").text(demoMsg.asyncAll);
            } else {
                asyncNodes(zTree.getNodes());
                if (!goAsync) {
                    $("#demoMsg").text(demoMsg.asyncAll);
                    curStatus = "";
                }
            }
        }
        function asyncNodes(nodes) {
            if (!nodes) return;
            curStatus = "async";
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            for (var i=0, l=nodes.length; i<l; i++) {
                if (nodes[i].isParent && nodes[i].zAsync) {
                    asyncNodes(nodes[i].children);
                } else {
                    goAsync = true;
                    zTree.reAsyncChildNodes(nodes[i], "refresh", true);
                }
            }
        }

        //左到右同步
        function syncLeftToRight() {
            var leftzTree = $.fn.zTree.getZTreeObj("leftTree"),
                leftnodes = leftzTree.getCheckedNodes();

            var a1=new Array();
            for(var i=0;i<leftnodes.length;i++){
                a1.push(leftnodes[i].id)
            }

            console.log("a1.toString()="+a1.toString());
            var access_token="eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1dGgiOiJST0xFX0FETUlOLFJPTEVfVVNFUiIsImV4cCI6MTUzODkwNDk1NH0.YRbaDvOicDRLQrABJqWmgtTNP9QkeK_InsoBqbrL5hzBJqSQz5jh_8xD-o_d39am0VFDtgVzqvPPnDBKB89LhQ";
            // var url = '../../../api/tree/v1/syncLeftToRight';
            var url = '../../../api/tree/v1/syncLeftToRightBulk';
            $.ajax({
                type:"post",
                url: url,
                headers: {
                    'Authorization':'Bearer '+access_token,
                    'Content-Type':'text/plain'
                },
                // async:false,
                dataType:"json",
                data:JSON.stringify(a1.toString()),
                success:function(data){
                    console.log("data="+data);
                    var zTree= $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.refresh();
                },
                error:function(){
                    alert("error 服务器返回失败");
                }
            })
        }

        function reset() {
            if (!check()) {
                return;
            }
            asyncForAll = false;
            goAsync = false;
            $("#demoMsg").text("");
            $.fn.zTree.init($("#treeDemo"), setting);
        }

        function check() {
            if (curAsyncCount > 0) {
                $("#demoMsg").text(demoMsg.async);
                return false;
            }
            return true;
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting);
            $.fn.zTree.init($("#leftTree"), leftTreeSetting);
            $("#syncLeftToRight").bind("click", syncLeftToRight);
            $("#asyncAllBtn").bind("click", asyncAll);
            $("#resetBtn").bind("click", reset);

            var equipment = [
                { value: '站外一次设备', data: '21' },
                { value: '其他', data: '1' },
                { value: '二次设备', data: '24  ' }
            ];

            $('#autocomplete').autocomplete({
                lookup: equipment,
                onSelect: function (suggestion) {
                    var leftTree = null;
                    leftTree = $.fn.zTree.getZTreeObj("leftTree");
                    // var nodes = leftTree.getNodes();
                    console.log("suggestion.data="+suggestion.data);
                    var node = leftTree.getNodeByParam("id", suggestion.data);
                    // var node = leftTree.getNodeByParam("id", "2",null);
                    console.log("node="+node+";suggestion.data="+suggestion.data);
                    if (node) {
                        leftTree.selectNode(node);
                    }
                    // alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                }
            });
        });
        //-->
    </SCRIPT>
</HEAD>

<BODY>

<div id="cc" class="easyui-layout" style="width:100%;height:700px;">
    <div data-options="region:'south',title:'South Title',split:true" style="height:300px;">
            <ul class="info">
                <li class="title">
                    <ul class="list">
                        <li><p>
                            [ <a id="syncLeftToRight" href="#" onclick="return false;">左到右同步</a> ]&nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addNodeSilent" href="#" onclick="return false;">ws同步</a> ]<br/>
                            async log:<br/>
                            <ul id="log" class="log"></ul></p>
                        </li>
                    </ul>
                </li>
            </ul>

    </div>
    <div data-options="region:'west',title:'West',split:true" style="width:50%;padding:5px;height:300px;">

        <div class="zTreeDemoBackground left">
            <ul ><input type="text" name="equipment" id="autocomplete"/></ul>
            <ul id="leftTree" class="ztree"></ul>
        </div>

    </div>
    <div data-options="region:'center',title:'center title'" style="width: 50%;padding:5px;background:#eee;height:300px;">
        <div class="zTreeDemoBackground right">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </div>

</div>

</BODY>
</HTML>
